<template>
    <el-table :data="tableData" style="width: 100%" ref="table">
        <el-table-column prop="s_name" label="name" width="180" />
        <el-table-column prop="s_gender" label="gender" width="180" />
        <el-table-column prop="s_age" label="age" />
        <el-table-column label="Operations">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
            </template>
        </el-table-column>
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" @change="searchStudent" placeholder="search" />
            </template>
            <template #default="scope">
                <el-button size="small" type="success" @click="tableFindGrade(scope.$index, scope.row)">查看学生的成绩
                </el-button>
                <el-button size="small" type="success" @click="tableFindScore(scope.$index, scope.row)">
                    查看学生的课程</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-button @click="insertStudent">添加学生</el-button>
    <el-dialog v-model="insertStudentVisable" :destroy-on-close="true">
        <InsertMessageVue />
    </el-dialog>
    <el-dialog v-model="dialogFormVisible" :destroy-on-close="true">
        <changeMessageAdminVue :studentId="studentId" />
    </el-dialog>

    <el-dialog v-model="studentGradeVisable" :destroy-on-close="true">
        <studentGradeVue :studentCourseId="studentCourseId" />
    </el-dialog>

    <el-dialog v-model="studentCouseVisable" :destroy-on-close="true">
        <studentCourse :studentGradeId="studentGradeId" />
    </el-dialog>
</template>

<script setup>
import InsertMessageVue from './InsertMessage.vue'
import changeMessageAdminVue from './changeMessageAdmin.vue'
import changeMessageVue from './changeMessage.vue'
import studentCourse from './studentCourse.vue'
import studentGradeVue from './studentGrade.vue'
import { ElMenu, ElRadio, ElTable, ElMessage, ElDialog, ElForm, ElMessageBox } from 'element-plus'
import { ref, computed, reactive, getCurrentInstance, nextTick, watch } from 'vue'
import { findAllStudent, editMessage, getGrades, editStudent, deleteStudent, searchStudentByName } from '../API/ApiMethod.js'
import { onMounted } from 'vue'
import { AES_Encrypt } from '../crypto/index.js'
onMounted(() => {
    findAllStudent().then(res => {
        if (res.code == 10000) {
            res.data.forEach(item => {
                tableData.push(item)
            })
        }
    })
})
components: {
    ElMenu
    ElRadio
    ElTable
    ElMessage,
        ElDialog,
        ElForm,
        studentGradeVue,
        studentCourse,
        changeMessageVue,
        changeMessageAdminVue,
        InsertMessageVue
}
function insertStudent() {
    insertStudentVisable.value = true
}
let insertStudentVisable = ref(false)
let studentId = ref('')
let studentCourseId = ref('')
let studentGradeId = ref('')
let studentCouseVisable = ref(false)
let studentGradeVisable = ref(false)
let isChecked = ref(true)
const proxy = getCurrentInstance()
let dialogFormVisible = ref(false)
let tableData = reactive([])
const search = ref('')
const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)
const tableFindGrade = (index, row) => {
    studentCourseId.value = row.s_id
    nextTick(() => {
        studentGradeVisable.value = true
    })

}
watch(tableData.length, (newValue, oldValue) => {
    console.log(newValue)
})
const searchStudent = () => {
    if (search.value != null) {
        searchStudentByName(search.value).then(res => {
            if (res.code == 10000) {
                if (res.data.length > 0) {
                    tableData = reactive([])
                    res.data.forEach(item => {
                        tableData.push(item)

                    })

                    console.log(tableData)
                } else {
                    ElMessage({
                        type: 'error',
                        message: '输入不能为空'
                    })
                }
            }
        })
    } else {
        ElMessage({
            type: 'error',
            message: '输入不能为空'
        })
    }
}
const tableFindScore = (index, row) => {
    studentCouseVisable.value = true
    studentGradeId.value = row.s_id
}
const goEdit = () => {

}

const checkOrignPassword = () => {
    if (editForm.orignPassword != "") {
        console.log(AES_Encrypt("2290291854"))
        let passwordUp = AES_Encrypt(editForm.orignPassword)
    } else {
        ElMessage({
            type: 'error',
            message: '输入不能为空'
        })
    }
}



const handleEdit = (index, row) => {

    studentId.value = row.s_id
    dialogFormVisible.value = true
}

function handleDelete(index, row) {
    ElMessageBox.confirm(
        `是否要删除${row.s_name}`,
        'Warning',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    ).then(() => {
        deleteStudent(row.s_id).then(res => {
            console.log(res)
            if (res.code == 10000) {
                ElMessage({
                    type: "success",
                    message: '删除成功'
                })
            } else {
                ElMessage({
                    type: "danger",
                    message: '你还不是管理员'
                })
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: 'Delete canceled',
        })
    })

}
let table = ref("")
</script>

<style>

</style>